import Vue from 'vue'

Vue.directive('drag', {
  bind: function(el) {
    const dragDom = el.querySelector('.title')
    dragDom.onmousedown = function(e) {
      //   计算当前元素相对定位父元素的位置
      const dragDomX = el.offsetLeft
      const dragDomY = el.offsetTop
      //   鼠标点击的位置
      const mouseCX = e.clientX
      const mouseCY = e.clientY
      document.onmousemove = function(e) {
        // 计算鼠标移动距离
        const mouseX = e.clientX - mouseCX
        const mouseY = e.clientY - mouseCY
        el.style.left = dragDomX + mouseX + 'px'
        el.style.top = dragDomY + mouseY + 'px'
      }
      document.onmouseup = function() {
        document.onmousemove = null
      }
    }
  }
})
